const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// css压缩
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
// 将CSS抽离成单独文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 基础库不打包，直接CDN引入
//https://segmentfault.com/a/1190000022271617
const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');
//命令行自定义参数
const argv = require('yargs').argv;

module.exports = {
    context: __dirname,
    mode: argv.mode || 'production',
    // devtool: 'source-map',
    entry: [
        'babel-polyfill', //js with async/await
        './index.js',
    ],
    output: {
        path: __dirname + '/dist/three',
        filename: '[name].js',
        // sourcePrefix: '',
        // publicPath: '/public/',
    },
    node: {
        // Resolve node module use of fs
        fs: 'empty',
    },
    module: {
        rules: [{
                test: /\.js?$/,
                exclude: /(node_modules)/,
                loader: 'babel-loader?cacheDirectory=true',
            },
            {
                test: /\.css$/, // 正则表达式，表示.css后缀的文件
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ], // 针对css文件使用的loader，注意有先后顺序，数组项越靠后越先执行
            },

            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                options: {
                    name: 'images/[name].[ext]',
                },
            },
        ],
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            template: './index.html', // 源模板文件
            filename: './index.html', // 输出文件【注意：这里的根路径是module.exports.output.path】 
            favicon: './public/images/favicon.ico', // 添加小图标
            inject: true, //自动注入
            minify: {
                html5: true,
                // 删除空格和换行符，若preserveLineBreaks参数设为true，则保留了换行符
                collapseWhitespace: true,
                preserveLineBreaks: false,
                minifyCSS: true,
                minifyJS: true,
                removeComments: false
            }
        }),
        new HtmlWebpackExternalsPlugin({
            externals: [{
                module: 'three',
                entry: ['build/three.js'],
                supplements: ['build/'],
            }]
        }),
        new OptimizeCSSAssetsPlugin({
            assetNameRegExp: /\.css$/g,
            cssProcessor: require('cssnano')
        }),
        new MiniCssExtractPlugin({
            filename: '[name]_[contenthash:8].css'
        }),

    ],
    devServer: {
        contentBase: path.join(__dirname, '/'),
        publicPath: '/',
        host: '0.0.0.0',
        inline: true,
        hot: true,
        //浏览器显示错误信息
        overlay: true,
    },
    performance: {
        hints: "warning", // 枚举
        maxAssetSize: 30000000, // 整数类型（以字节为单位）
        maxEntrypointSize: 50000000, // 整数类型（以字节为单位）
        assetFilter: function(assetFilename) {
            // 提供资源文件名的断言函数
            return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
        }
    },
};